<template>
  <div class="header flex-y-center vux-1px-b">
    <div class="back" @click="toBack"><img style="width:0.22rem;" v-src="'/wxStatic/img/top_back.png'" alt=""></div>
    <form @submit.prevent="subMit" class="form flex-row flex-y-center" action=".">
      <div class="flex-grow-0 inputBox">
        <input  v-model="inputVal" type="search">
        <div class="search_icon">
          <img v-src="'/wxStatic/img/searchPic_black.png'" alt="">
        </div>
        <div @click="clearClick" v-if="inputVal" class="close_icon">
          <img v-src="'/wxStatic/img/icon-close2.png'" alt="">
        </div>
      </div>
      <div class="flex-grow-0">
        <input @click="subMit" class="submit" type="button" value="搜索">
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    name: "search_header_bar",
    props:{
      propsValue: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        inputVal: ''
      }
    },
    watch:{
      propsValue(val){
        if(val){
          this.inputVal=val;
        }
      },
      inputVal(val) {
        if(val){
          this.$emit('on-change', val);
        }else{

        }

      }
    },
    mounted(){

    },
    methods: {
      toBack() {
        console.log(window.history.length);
        //直接打开某个切面；返回不用能；就直接跳转首页、、、window.history.length=2

        if (window.history.length <= 3) {
          window.location.href = window.location.origin + '/wx/index.html';
        } else {
          window.history.go(-1);
        }

      },
      subMit() {
        if (this.inputVal) {
          this.$emit('on-submit', this.inputVal)
        } else {
          this.$vux.toast.text('搜索关键词不能为空')
        }
      },
      clearClick(){
        this.inputVal=''
      }
    }

  }
</script>

<style lang="less" scoped>
  .header {
    height: 45px;
    padding-left: 0.4rem;
    width: 100%;
    background: #fff;
    .back {
    }
    .form {
      input {
        border: none;
      }
      .inputBox {
        margin-left: 0.45rem;
        position: relative;
        height: 0.64rem;
        width: 5.2rem;
        background: #efeff4;
        border-radius: 30px;
        input {
          font-size: 0.26rem;
          width: 100%;
          height: 100%;
          background: transparent;
          padding-left: 0.66rem;
          caret-color: red;
        }
        .search_icon {
          width: 0.3rem;
          position: absolute;
          left: 0.15rem;
          top: 50%;
          transform: translateY(-50%);
        }
        .close_icon {
          width: 0.32rem;
          position: absolute;
          right: 0.15rem;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .submit {
        background: #fff;
        font-size: 0.3rem;
        margin-left: 0.3rem;
        font-weight: 500;
      }

    }
  }

</style>